<template>
  <div class="income">
    <BoxIncome :income-list="incomeList" @IncomeType="onIncomeType" />
    <IncomeChart :chart-height="chartHeight" :chart-date="chartDate" />
    <IncomeStatistics :statistics-list="statisticsList" />
  </div>

</template>

<script>
import { indexv2 } from '@/api/dashboard.js'
import BoxIncome from './BoxIncome.vue'
import IncomeChart from './IncomeChart'
import IncomeStatistics from './IncomeStatistics'
export default {
  components: {
    BoxIncome,
    IncomeChart,
    IncomeStatistics
  },
  props: {
    incomeList: {
      type: Array,
      default: () => []
    },
    chartDate: {
      type: Array,
      default: () => []
    },
    startPollType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chartHeight: '',
      statisticsList: []
    }
  },
  computed: {

  },
  watch: {
    startPollType: {
      handler(newVal) {
        if (newVal) {
          this.indexv2api()
        }
      }
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.getTableHeight()
      this.indexv2api()
    })
    window.addEventListener('resize', this.getTableHeight, false)
  },
  methods: {
    indexv2api() {
      indexv2().then(res => {
        this.statisticsList = [{
          name: '总会员数',
          value: res.data.totaluser
        }, {
          name: '总销售额',
          value: res.data.totalsales
        }, {
          name: '总退款额',
          value: res.data.totalrefundsales
        }, {
          name: '昨日销售额',
          value: res.data.yesterdaysales
        }, {
          name: '今日销售额',
          value: res.data.todaysales
        }, {
          name: '昨日会员销售额',
          value: res.data.yesterdayvipsales
        }, {
          name: '今日会员销售额',
          value: res.data.todayvipsales
        }, {
          name: '昨日优惠卡销售额',
          value: res.data.yesterdaycardsales
        }, {
          name: '今日优惠卡销售额',
          value: res.data.todaycardsales
        }, {
          name: '包周总销售额',
          value: res.data.totalweekvipsales
        }, {
          name: '包月总销售额',
          value: res.data.totalmonthvipsales
        }, {
          name: '昨日注册',
          value: res.data.yesterdayusersignup
        }, {
          name: '今日注册',
          value: res.data.todayusersignup
        }, {
          name: '昨日退款额',
          value: res.data.yesterdayrefundsales
        }, {
          name: '今日退款额',
          value: res.data.todayrefundsales
        }, {
          name: '今日登录',
          value: res.data.todayuserlogin
        }, {
          name: '三日新增',
          value: res.data.threednu
        }, {
          name: '七日新增',
          value: res.data.sevendnu
        }, {
          name: '七日活跃',
          value: res.data.sevendau
        }, {
          name: '月活跃',
          value: res.data.thirtydau
        }]
      })
    },
    getTableHeight() {
      const rect = document.getElementById('table').getBoundingClientRect()
      const h = window.innerHeight
      const FooterHeight = 250
      var tableHeight = h - rect.top - FooterHeight
      this.chartHeight = tableHeight
    },
    onIncomeType(val) {
      this.$emit('IncomeTypepage', val)
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
